
<!--
 * @Author: wang_sheshe
 * @Date: 2021-05-17 15:04:17
 * @LastEditTime: 2021-07-30 14:10:59
 * @Description: 巡视结论确认页
-->

<template>
	<article class="bg_4dbfae tourTaskPage">
		<!-- 头组件 -->
        <van-nav-bar title="巡视记录确认" left-text="" left-arrow @click-left="back" fixed>
			<template slot="right">
				<div class="parent-circle">
					<div class="child-circle"></div>
				</div>
            </template>
        </van-nav-bar>
		<!-- content -->
		<van-row style="flex: 1; overflow: auto;">
			<div class="title-time">
				<span>巡视时长：</span>
				<label>{{showTime}}</label>
			</div>
			<van-field v-if="taskData.patrolTypeName != '全面巡视'"
				label="变电站"  
				placeholder="" 
				readonly 
				required  
				v-model="taskData.substationName" :border="false"
			/>

			<van-field v-if="taskData.patrolTypeName == '全面巡视'"
				label="天气"  
				placeholder="请选择" 
				required  
				right-icon="arrow" 
				v-model="taskData.weather" :border="false"
				@click-right-icon="showWeather=true"/>
				
			<van-field v-if="taskData.patrolTypeName == '全面巡视'"
				label="气温(℃)" 
				:formatter="formatterAir"
				placeholder="请输入" 
				required  
				v-model="taskData.airTemperature" 
				:border="false" />

			<van-field v-if="taskData.patrolTypeName == '全面巡视'"
				label="温湿度(%)" 
				placeholder="请输入" 
				:formatter="formatterHum"
				required 
				:border="false"  
				v-model="taskData.humiture"/>
				
            <van-field v-if="taskData.patrolTypeName == '全面巡视'"
				label="风速" 
				placeholder="请选择" 
				required 
				readonly 
				:border="false"  
				v-model="taskData.windSpeed" 
				right-icon="arrow"
				@click-right-icon="showWindspeed=true"/>
			
			<van-field 
				label="开始时间" 
				placeholder="请选择" 
				required readonly 
				maxlength="25" 
				:border="false" 
				right-icon="arrow" 
				v-model="taskData.patrolStartTime"
				@click-right-icon="onClickRightIcon('sTime')"/>
			<van-field 
				label="结束时间" 
				placeholder="请选择" 
				required readonly 
				maxlength="25" 
				:border="false" 
				right-icon="arrow" 
				v-model="taskData.patrolEndTime"
				@click-right-icon="onClickRightIcon('eTime')"/>
			<div class="lineGray"></div>
			<van-field 
				label="巡视人员" 
				maxlength="64"  
				placeholder="请选择" 
				required 
				readonly
                right-icon="arrow" 
				:border="false" 
				v-model.trim="taskData.tourPersonName"
				@click-right-icon="showPerson=true"/>
			<div class="lineGray"></div>	

			<van-row style="padding: 0 15px;color:#9d9d9d;" class="font14">结论:</van-row>
			<!-- <div style="padding: 0.26667rem 0.42667rem;">
				<input v-model.trim="taskData.inspectResult" type="textarea">
			</div>	 -->
			<div style="margin: 15px;border-radius: 5px;">
				<van-field class="textarea-content" v-model="taskData.inspectResult" rows="2" autosize type="textarea" maxlength="256"
                    placeholder="请输入备注" show-word-limit />
			</div>
			<!-- 巡视设备列表 -->
			<div v-if="taskData.patrolTypeName == '特殊巡视'" class="doc-wrapper">
				<van-row class="font18 daiban" style="padding: 15px 15px 0 15px;color: #333;">
					<div style="width: 50%;"><span class="line_green"></span> 巡视设备列表</div>
				</van-row>
				<van-collapse v-model="activeNames" style="height: 500px;">
					<van-collapse-item v-for="(deviList,index) in showDeviceList" :key="index" :title="deviList.bayName" :name="deviList.bayId" value-class="red">
						<van-cell v-for="(device,i) in deviList.deviceList" :key="i" :title="device.deviceName"></van-cell>
					</van-collapse-item>
				</van-collapse>
			</div>

			<van-row class="btn-wrapper">
				<van-button type="primary" size="small" class="c" @click="confirm">结束巡视</van-button>
			</van-row>
		<!-- pop start-->
		<van-popup round v-model="isDatePicker" position="bottom">
			<!-- 时间类型选择器 -->
			<van-datetime-picker v-model="currentDate" title="选择时间" 
			:min-date="minDate"
			:formatter="formatter"
			:max-date="maxDate"
			@confirm="onConfirm" @cancel="onCancel('showPicker2')" type="datetime">
			</van-datetime-picker>
		</van-popup>
		<!-- pop end -->
		<!-- 反馈组件 天气类型-->
		<van-action-sheet title="选择天气"
			cancel-text="取消"
			@cancel="showWeather=false"
            v-model="showWeather"
            :actions="weatherList"
            @select="weatherBtn"
		/>
		<!-- 反馈组件 风速-->
		<van-action-sheet title="选择风速（米/秒）"
			cancel-text="取消"
			@cancel="showWindspeed=false"
            v-model="showWindspeed"
            :actions="windspeedList"
            @select="windspeedBtn"
		/>
		
		<!-- 反馈组件 巡视人员-->
		<van-popup round v-model="showPerson" class="selPerson" position="bottom" @close="showPerson=false">
			<selPople
				:userList="selTourPerson"
				@comfirmPerson="comfirmPerson" 
				@closePersonPage="showPerson=false">
			</selPople>
		</van-popup>
	</van-row>
	</article>
</template>

<script type="text/javascript">
	import { Tabbar, TabbarItem ,Tag } from 'vant';
	import selPople  from "@/components/SelPeople"
	import {endTourTask} from '../../api/tourTask';
	import Util from "@/utils/util"
	export default {
		name: 'DefectManage',
		components: {
			selPople
		},
		data() {
			return {
				//任务详情
				taskData:{
					patrolType: "",//巡视类型id
					patrolTypeName: "",//巡视类型名称
					tourPersonName: "",//巡视人员
					substationName: "",//变电站名称
					weather: "",//天气
					airTemperature: "",//气温
					humiture: "",//温湿度
					windSpeed:"",//风速
					patrolStartTime:"",
					patrolEndTime:"",
					//inspectUserName:"",
					patrolResult:"",//巡视结论
					remark:"",
				},
				selTourPerson:[],//巡视人员
				activeNames: [],
				timeType: 'sTime',// 默认 开始时间
				showWeather:false,//天气开关
                isDatePicker:false,
				showWindspeed:false,//风速开关
				showPerson: false,//巡视人员
				userList: [],//巡视人员
				showDeviceList: [],//巡视设备
				currentDate: new Date(),
				tourType: "",//巡视类型
				//天气
				weatherList: [],
				//风速
				windspeedList:[],
				minDate: new Date(new Date().getFullYear()-2,new Date().getMonth()+1,new Date().getDay()),
				maxDate: new Date(new Date().getFullYear()+2,new Date().getMonth()+1,new Date().getDay())
			}
		},
		computed: {
			showTime() {
				var showT ="==时==分";
				if(this.taskData.patrolStartTime && this.taskData.patrolEndTime) {
					var start = new Date(this.taskData.patrolStartTime).getTime();
					var end = new Date(this.taskData.patrolEndTime).getTime();
					var total = (end -start)/1000;
					if(end > start || end == start) {
						var hour = parseInt(total/(60*60));
						var min =  ((total - hour*60*60)/60);
						
					}
					showT = (hour? hour+"时":"") + (min? min+"分":"");
				}
				return showT;
			}
		},
		methods: {
			//日期格式
			formatter(type, val) {
				if (type === 'year') {
					return val + '年';
				}
				if (type === 'month') {
					return val + '月';
				}
				if (type === 'day') {
					return val + '日';
				}
				if (type === 'hour') {
					return val + '时';
				}
				if (type === 'minute') {
					return val + '分';
				}
				return val;
			},
			/**
			* @description: 参数校验
			* @param {*}
			* @return {*}
			*/
			confirm(){
				// if(this.taskData.patrolTypeName == '全面巡视') {
				// 	if(Util.baseUtil.isEmptyString(this.taskData.weather)) {
				// 		this.$Toast.fail("请填写天气!")
				// 		return;
				// 	}
				// 	if(Util.baseUtil.isEmptyString(this.taskData.airTemperature)) {
				// 		this.$Toast.fail("请填写气温!")
				// 		return;
				// 	}
				// 	if(Util.baseUtil.isEmptyString(this.taskData.humiture)) {
				// 		this.$Toast.fail("请选择温湿度!")
				// 		return;
				// 	}
				// 	if(Util.baseUtil.isEmptyString(this.taskData.windSpeed)) {
				// 		this.$Toast.fail("请选择风速!")
				// 		return;
				// 	}
				// }
				
				if(Util.baseUtil.isEmptyString(this.taskData.patrolStartTime)) {
					this.$Toast.fail("请选择开始时间!")
					return;
				}
				if(Util.baseUtil.isEmptyString(this.taskData.patrolEndTime)) {
					this.$Toast.fail("请选择结束时间!")
					return;
				}
				var start = new Date(this.taskData.patrolStartTime).getTime();
				var end = new Date(this.taskData.patrolEndTime).getTime();
				if(start > end) {
					this.$Toast.fail("开始时间不能大于结束时间!")
					return;
				}
				if(Util.baseUtil.isEmptyString(this.taskData.tourPersonName)) {
					this.$Toast.fail("请选择巡视人员!")
					return;
				}
				this.dealParams();
			},
			//湿度
			formatterHum(value) {
				if( 0 < value && value < 100){
					return value;
				}else{
					return "";
				}
			},
			//气温格式
			formatterAir(value) {
				var t = value.charAt(0);
				//过滤非数字，除了数字和1.
				var code = value.replace(/[^\d.]/g,"");
				//保证第一个为数字而不是.
				code = code.replace(/^\./g,"");
				//保证只出现一个点
				code = code.replace(/\.{2,}/g,".");
				code = code.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
				code = code.replace(/^(\-)*(\d+)\.(\d).*/,"$1$2.$3")
				if(code.indexOf(".") < 0) {
					if(code.substr(0,1)=='0') {
						code = code.substr(1,3)
					}else{
						code = code.substr(0,2)
					}
				}
				if(t == "-") {
					code = "-"+code;
				}
				return code;
			},
			/**
			* @description: 处理结束参数
			* @param {*}
			* @return {*}
			*/
			dealParams() {
				var userList = [],weather="",windSpeed="";
				//巡视人员
				this.selTourPerson.forEach(item => {
					userList.push({
						patrolStaffId:  item.userId,
						patrolStaffName: item.userName,
						coordinate: ""
					})
				})
				var params = {
					userId: this.userInfo.userId,
					roleCode: "",//用户角色
					airTemperature: this.taskData.airTemperature,//气温
					humiture: this.taskData.humiture,//湿度
					id: this.taskData.id,//任务id
					patrolEndTime: new Date(this.taskData.patrolEndTime).getTime(),//结束时间
					patrolStartTime: new Date(this.taskData.patrolStartTime).getTime(),//开始时间
					userList:userList,//巡视人员
					weather:this.taskData.weather,//天气
					windSpeed: this.taskData.windSpeed,//分速
					patrolResult: this.taskData.patrolResult,//巡视结论
					remark: this.taskData.remark,//巡视备注
					type: "0",//结束巡视任务
				}
				console.log(params)
				this.endTourTask(params);
			},
			//选择时间
            onConfirm(val){
				this.isDatePicker = false;
            	var time = Util.DateUtil.getFormatDateByLong(val,'yyyy-MM-dd hh:mm')
				if(this.timeType == 'sTime'){//开始时间
					this.taskData.patrolStartTime = time;
				}else{//结束时间
					this.taskData.patrolEndTime = time;
				}
            },
            onCancel(){
				this.isDatePicker = false;
            },
            onClickRightIcon(data){
				this.timeType = data;
                this.isDatePicker=true;
			},
			/**
			 * 返回
			 */
			back(){
				this.$router.push({
					name:"tourTaskIndex",
					params: {
					}
				})
			},
			//天气
			weatherBtn(val) {
				this.showWeather = false
				this.taskData.weather = val.name;
			},
			//风速
			windspeedBtn(val) {
				this.showWindspeed = false;
				this.taskData.windSpeed = val.name
			},	
			/**
			* @description: 结束巡视任务
			*/
			endTourTask(params) {
				var self = this
				this.$toast.loading({
					duration: 0,//展示时长 0不会消失
					message: "正在结束巡视任务中...",
					forbidClick: true,//是否禁止背景点击
					overlay: true//是否显示背景遮罩层
				})
				endTourTask(params).then(function(res) {
					self.$Toast.clear()
					if(res.success){
						self.$Toast.success(res.msg)
						self.$router.push({
							path: '/TourTaskIndex',
							query: {
								title: '巡视'
							}
						})
					}else{
						self.$Toast.fail(res.msg)
					}
				}).catch(err => {
					self.$toast.clear()
					self.$Toast.fail(err)
				});
			},
			/**
			* @description: 人员选择回调
			* @param {*}
			* @return {*}
			*/
			comfirmPerson(personList) {
				this.showPerson = false;
				this.taskData.tourPersonName = personList.map(item => item.userName).join(",");
				this.selTourPerson = personList;
			},
			/**
			* @description: 渲染巡视任务
			* @param {*} taskInfo
			* @return {*}
			*/
			renderData(taskInfo) {
				//变电站
				this.taskData.substationName = taskInfo.substationName;
				this.taskData.substationId  = taskInfo.substationId;
				//巡视类型
				this.taskData.patrolTypeName = taskInfo.patrolTypeName;
				//天气
				this.taskData.weather  = taskInfo.weather;
				//气温
				this.taskData.airTemperature = taskInfo.airTemperature;
				//温湿度
				this.taskData.humiture = taskInfo.humiture;
				//巡视人员
				taskInfo.userList.map(item => {
					this.selTourPerson.push({
						userId: item.patrolStaffId,
						userName: item.patrolStaffName
					})
					this.taskData.tourPersonName = this.selTourPerson.map(item => item.userName).join(",");
				})
				this.taskData.remark = taskInfo.remark;//备注
				//开始时间
				this.taskData.patrolStartTime = 
				Util.DateUtil.getFormatDateByLong(taskInfo.patrolStartTime,'yyyy-MM-dd hh:mm')
				//结束时间
				this.taskData.patrolEndTime = Util.DateUtil.getFormatDateByLong(taskInfo.patrolEndTime,'yyyy-MM-dd hh:mm')
				//巡视结论
				this.taskData.inspectResult = taskInfo.inspectResult;
				this.taskData.id = taskInfo.id;//巡视id
			},
		},
		
		mounted() {
			
		},
		
		created() {
			var userInfo = localStorage.getItem("userInfo");
			this.userInfo = JSON.parse(userInfo);
			this.weatherList = Util.baseUtil.getSpecialCode("WEATHER");
			this.windspeedList = Util.baseUtil.getSpecialCode("WIND_SPEED");
			debugger;
			this.taskData = this.$route.params.taskInfo;//巡视任务
			this.renderData(this.taskData);
			if(this.$route.params.deviceList) {//巡视设备
				this.showDeviceList = this.$route.params.deviceList;
			}
		},
		
	}
</script>

<style scoped>
	article {
		display: flex;
		flex-direction: column;
		height: 100vh;
        font-family: 微软雅黑;
        background: #ffffff;
	}
	.active{
		color: #36BDA6 !important;
		background: #ECF6F4 !important;
	}
	.van-nav-bar__text,.van-nav-bar .van-icon{
		color: #333333;
    }
    .van-button--default {
        margin-right: 20px !important;
        width: 80px;
    }
    .van-button--primary {
		background-color: #17B49B;
        border: 0.02667rem solid #17B49B;
        color: white;
        width: 138px;
        margin: 0 auto;
    }
	.templateDiv{
		display: flex;
		justify-content: space-between;
		padding: 10px 15px;
		font-size: 1.125rem;
    }
    input{
        width: calc(100% - 20px);
        margin: 10px;
        box-sizing: border-box;
		height: 60px;
		border: 1px solid #E2E2E2;
		border-radius: 3px;
    }
	.flex_between{
		display: flex;justify-content: space-between;
	}
	.van-checkbox-part{
		display: inline;margin-right: 15px;
	}
	input{
        width: calc(100% - 20px);
        margin: 0px 10px;
        box-sizing: border-box;
		height: 60px;
		border: 1px solid #E2E2E2;
		border-radius: 3px;
    }
	.personClass /deep/ .van-nav-bar__text{
		font-size: 14px !important;
	}
	.personClass /deep/ .van-nav-bar__title{
		font-size: 16px !important;
	}
	.selSub {
		width: 100%;
		height: 100%;
	}
	.title-time{
		text-align: center;
		padding: 10px 0px 0px 0px;
		font-size: 14px;
		margin-top: 50px;
	}
	.doc-wrapper{
		margin: 0.2rem 0.26667rem 0 0.4rem;
		background: white;
		border-radius: 10px;
	}
	.line_green{
		display: inline-block;
		height: 16px;
		width: 3px;
		background: #17B49B;
		border-radius: 3px;
		position: relative;
		top: 3px;
	}
	.selPerson{
		height:100%;width:100%;
	}
	.btn-wrapper {
		text-align: center;
		position: fixed;
		bottom: 0px;
		width: 100%;
	} 
	.textarea-content{
		border: 1px solid #E2E2E2;color:#999;
	}
</style>
